/*
  1. 打开页面
    + 请求到所有的分类数据
    + 把级联菜单渲染好

  2. 打开页面
    + 按照默认选中的某一个商品
    + 获取到它的分类参数信息
    + 渲染到下面的表格内

  3. 级联菜单切换内容
    + 级联菜单切换什么内容
    + 跟随变化什么内容
    + 思路:
      => 当级联菜单选中的项改变的时候
      => 从新执行 getParamsInfo 方法就可以了
    + 双向数据绑定了一个 cateChecked 数组
      => 只要级联选择器的内容改变
      => cateChecked 数组就会改变
    + 只要 cateChecked 数组变了
      => 就从新请求
      => watch 监控 cateChecked 数组
*/

export default {
  name: 'Params',
  data () {
    return {
      activeName: 'first',
      // 添加小标签的 input 是否显示
      inputVisible: false,
      // 添加小标签的 input 内的文本内容
      addParamsInfo: '',
      // 分类列表, 渲染级联菜单
      cateList: [],
      // 默认选中的分类的 id
      cateChecked: [1, 3, 6],
      // 动态参数数组
      manyParamsList: []
    }
  },
  created () {
    // 请求级联菜单需要的数据
    this.getCateList()
    // 请求默认的一个分类参数
    this.getParamsInfo()
  },
  methods: {
    // 请求所有分类列表
    async getCateList () {
      const { data } = await this.$get('categories', { params: { type: 3 } })
      // 赋值操作
      this.cateList = data
    },
    // 获取动态参数
    async getParamsInfo () {
      // 根据当前选择的 曲面电视
      // 获取 曲面电视相关的参数
      const { data } = await this.$get(`categories/${this.cateChecked[2]}/attributes`, { params: { sel: 'many' } })
      this.manyParamsList = data
    },
    // 获取静态参数
    async getOnlyParamsInfo () {
      console.log('获取静态参数')
    },
    // 删除一条单一信息
    async deleteInfoHandler (vals, item, name, attrId) {
      // 拿到的信息是完整的 参数列表
      //   每一条数据中的 attr_vals 信息
      // 拿到当前点击的这一条信息
      //   你点击的是 111, 那么拿到的就应该是 111
      // console.log('我要删除某一条信息')
      // console.log(vals) // 字符串
      // console.log(item) // 字符串
      // console.log(name) // 字符串

      // 如何从 vals 内部删除 item 这一项
      // 方案1: replace
      // 如果这样执行, 需要在删除完毕以后, 判断一下, 是否是以 逗号(,) 结尾
      // 如果是, 那么删除最后一个 逗号, 如果不是就算了
      // let res = vals.replace('123', '').replace(',,', ',')
      // if (/,$/.test(res)) res = res.slice(0, -1)

      // 方案2: 数组方法来实现
      /*
        接口文档补充
          + 请求地址: categories/:id/attributes/:attrId
          + 请求方式: PUT
          + 携带参数:
            => id: 分类 id, 添加在 url 地址上
            => attrId: 属性 id, 添加在 url 地址上
            => attr_name: 属性名称, 请求体
            => attr_sel: 'only' 或者 'many, 请求体
            => attr_vals: 你修改的参数字符串
      */
      const res = vals.filter(t => t !== item).join()
      // console.log('删除之后剩余 : ')
      // console.log(res)

      /* eslint-disable quote-props */
      // 发送请求进行删除操作
      const { meta } = await this.$put(`categories/${this.cateChecked[2]}/attributes/${attrId}`, {
        'attr_name': name,
        'attr_sel': 'many',
        'attr_vals': res
      })

      if (meta.status === 200) {
        this.$message({
          type: 'success',
          message: `修改 ${name} 参数信息成功`
        })

        // 从新请求一遍列表数据渲染
        // this.getParamsInfo()
        // 因为后端数据已经修改, 我们执行 getParamsInfo 是为了同步更新前端视图
        // 我们自己操作直接修改前端视图
        // 只要把这一条信息里面的 attr_vals 修改了即可
        const info = this.manyParamsList.find(item => item.attr_id === attrId)
        info.attr_vals = res
      }
    },
    // 显示添加信息文本框
    showAddTagHandler () {
      this.inputVisible = true
    },
    // 添加参数信息
    /*
        接口文档补充
          + 请求地址: categories/:id/attributes/:attrId
          + 请求方式: PUT
          + 携带参数:
            => id: 分类 id, 添加在 url 地址上
            => attrId: 属性 id, 添加在 url 地址上
            => attr_name: 属性名称, 请求体
            => attr_sel: 'only' 或者 'many, 请求体
            => attr_vals: 你修改的参数字符串
      */
    async addParamsInfoHandler (val) {
      console.log('你要添加')
      console.log('要添加的内容 : ', this.addParamsInfo)
      console.log('id : ', this.cateChecked[2])
      console.log('attrId : ', val.attr_id)
      console.log('attr_name : ', val.attr_name)
      console.log('attr_sel : ', val.attr_sel)
      console.log('attr_vals : ', val.attr_vals)
      const addStr = this.addParamsInfo.trim()

      // 1. 判断你填写的内容如果是一个 空字符串, 那么什么都不做
      // 直接还原就好了
      if (addStr === '') {
        this.inputVisible = false
        // 还原回来以后, 让文本置空
        this.addParamsInfo = ''
        return
      }

      // 2. 判断你填写的内容元数据里面是否存在了
      // 最好不要重复数据出现
      if (val.attr_vals.indexOf(addStr) !== -1) {
        this.inputVisible = false
        // 还原回来以后, 让文本置空
        this.addParamsInfo = ''
        this.$message({
          type: 'warning',
          message: '该条信息已存在, 请重试'
        })
        return
      }

      // 3. 该增加信息了
      val.attr_vals.push(addStr)

      // 发送请求进行修改
      const { meta } = await this.$put(`categories/${this.cateChecked[2]}/attributes/${val.attr_id}`, {
        'attr_name': val.attr_name,
        'attr_sel': 'many',
        'attr_vals': val.attr_vals.join()
      })

      if (meta.status === 200) {
        this.$message({
          type: 'success',
          message: '添加信息成功'
        })

        // 让添加的文本框还原
        this.inputVisible = false
        // 还原回来以后, 让文本置空
        this.addParamsInfo = ''
      }
    }
  },
  watch: {
    cateChecked: {
      handler () {
        // 只要代码执行了, 表示级联菜单从新选择了
        this.getParamsInfo()
        this.getOnlyParamsInfo()
      },
      deep: true
    }
  },
  computed: {
    randerParamsInfoList: {
      get () {
        const res = this.manyParamsList.map(item => {
          const info = { ...item }
          info.attr_vals = item.attr_vals.split(',')
          return info
        })
        return res
      }
    }
  }
}
